<!--
 * @Author: xlm
 * @Date: 2021-08-04 10:17:46
 * @LastEditors: xlm
 * @LastEditTime: 2021-08-09 14:35:06
 * @Description: 输入交易密码
-->
<template>
  <base-popup v-if="showPop" :show="showPop" :show-close="false" @close="closeModel">
    <!-- <view class='container'> -->
    <view class="box">
      <view class="password-box">
        <view class="tit-box">
          <view class="tit">请输入交易密码</view>
          <b-image @click="close" isAsset src="/images/mine/popup_close.png" class="close-icon"></b-image>
        </view>
        <view class="password">
          <view v-for="(item, index) in 6" :key="index" class="item-box">
            <view class="item" v-if="password.charAt(index)"></view>
          </view>
        </view>
      </view>
      <keyboard @changeStr="changeStr" />
    </view>
    <!-- </view> -->
  </base-popup>
</template>

<script>
import keyboard from '@/components/keyboard/index.vue'
export default {
  components: {
    keyboard
  },
  data() {
    return {
      //   showPop: false,
      showPop: true,
      password: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  activated() {},
  methods: {
    changeStr(str) {
      if (str === -1) {
        if (this.password.length > 0) {
          this.password = this.password.slice(0, this.password.length - 1)
        }
        return
      }
      if (this.password && this.password.length === 6) {
        return
      }
      if (this.password.length < 6) {
        this.password = this.password + String(str)
      }
      if (this.password.length === 6) {
        this.$emit('complete', this.password)
      }
    },
    close() {
      this.$emit('close')
    },
    // 清除密码
    clearPassword(){
      this.password = ''
    },
    closeModel(){
      
    }
  }
}
</script>

<style lang="scss" scoped>
// .container {
//   position: absolute;
//   top: 0;
//   left: 0;
//   background: rgba(0, 0, 0, 0.4);
//   width: 100vw;
//   height: 100%;
//   overflow: hidden;
//   z-index: 999;
//   .box {
//     width: 100vw;
//     height: 850rpx;
//     background: white;
//     position: absolute;
//     bottom: 0;
//     left: 0;
//     z-index: 999;
//   }
// }
.box {
  width: 100vw;
  height: 850rpx;
  background: white;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  .password-box {
    .tit-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 50rpx 25rpx 150rpx 56rpx;
      .tit {
        font-size: 46rpx;
        line-height: 66rpx;
        font-weight: 500;
        color: black;
      }
      .close-icon {
        width: 34rpx;
        height: 34rpx;
        display: block;
        padding: 10rpx;
      }
    }
    .password {
      display: flex;
      padding: 0rpx 60rpx 90rpx;
      justify-content: space-between;
      .item-box {
        width: 84rpx;
        border-bottom: 2rpx solid #bbbbbb;
        flex-shrink: 0;
        height: 54rpx;
        .item {
          text-align: center;
          width: 24rpx;
          height: 24rpx;
          box-sizing: content-box;
          background: black;
          border-radius: 50%;
          margin: 0 auto;
          margin-bottom: 30rpx;
        }
      }
    }
  }
}
</style>
